<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素3D变换效果</title>
		<style>
			/* 对所有二维面做样式设置 */
			.fu>div {
				/* 设置宽高与边框 */
				width: 200px;
				height: 200px;
				border: 5px solid #0aa1ed;
				/* 文字水平垂直居中与字号 */
				text-align: center;
				line-height: 200px;
				font-size: 80px;
				/* 使用绝对定位，让div脱离从上往下排列的二维面 */
				position:absolute;
				/* 设置外间距，让元素与元素之间有一点距离 */
				margin: 200px 300px;
			}
			/* 开启视角 */
			.show {
				perspective: 800px;
			}
			/* 让父元素开启3D效果 */
			.fu {
				transform-style: preserve-3d;
			}
			/* 元素在Z轴位移，正值离眼睛近，负值离眼睛远 */
			.z1 {
				transform: translateZ(100px);
			}
			.z2{
				transform: translateZ(0);
			}
			.z3{
				transform: translateZ(-100px);
			}
			.z4 {
				/* 元素在3D空间绕X轴旋转 "翻单杠" */
				transform: translateX(350px) rotateX(30deg);
			}
			.z5 {
				/* 元素在3D空间绕Y轴旋转 "跳钢管舞" */
				transform: translateX(700px) rotateY(30deg);
			}
		</style>
	</head>
	<body>
		<!-- 1.定义视角 -->
		<div class="show">
			<!-- 2.开启3D效果，代表"体" -->
			<div class="fu">
				<!-- 3.代表每一个二维面 -->
				<div class="z1">1</div>
				<div class="z2">2</div>
				<div class="z3">3</div>
				<div class="z4">4</div>
				<div class="z5">5</div>
			</div>
		</div>
	</body>
</html>